<template>
  <div class="author-view">
    <header class="header">
      <img src="/LOGO.png" alt="School Logo" class="logo" />
      <h5 class="school-name">中国计量大学 Web前端开发</h5>
    </header>
    <main class="content">
      <h1 class="title">个人简历</h1>
      <div class="resume-card">
        <table class="resume-table">
          <tr>
            <th colspan="4" class="header-row">个人信息</th>
          </tr>
          <tr>
            <td class="label">姓名</td>
            <td>陶诗莹</td>
            <td class="label">性别</td>
            <td>女</td>
          </tr>
          <tr>
            <td class="label">学号</td>
            <td>2300303105</td>
            <td class="label">电话</td>
            <td>15024340028</td>
          </tr>
          <tr>
            <td class="label">邮箱</td>
            <td colspan="3">2351922591@qq.com</td>
          </tr>
          <tr>
            <th colspan="4" class="header-row">教育背景</th>
          </tr>
          <tr>
            <td class="label">学校</td>
            <td>中国计量大学</td>
            <td class="label">专业</td>
            <td>计算机科学与技术</td>
          </tr>
          <tr>
            <td class="label">学历</td>
            <td>本科</td>
            <td class="label">入学时间</td>
            <td>2023年</td>
          </tr>
          <tr>
            <th colspan="4" class="header-row">项目经验</th>
          </tr>
          <tr>
            <td class="label">AI日程规划助理</td>
            <td colspan="3">负责前端开发，使用Vue框架，集成用户交互设计和任务管理功能。</td>
          </tr>
          <tr>
            <td class="label">大模型遥感图像解译</td>
            <td colspan="3">参与论文撰写，优化数据集并实现大模型微调，提升遥感图像分析准确度。</td>
          </tr>
          <tr>
            <th colspan="4" class="header-row">技能</th>
          </tr>
          <tr>
            <td class="label">前端开发</td>
            <td colspan="3">Vue.js, HTML, CSS, JavaScript</td>
          </tr>
          <tr>
            <td class="label">后端开发</td>
            <td colspan="3">Spring Boot, MySQL</td>
          </tr>
          <tr>
            <td class="label">其他技能</td>
            <td colspan="3">Git, TypeScript, Dart</td>
          </tr>
        </table>
      </div>
      <router-link to="/HomePage" class="back-button">返回</router-link>
    </main>
    <footer class="footer">
      <p>版权所有 © 姓名: 陶诗莹, 学号: 2300303105, 电话: 15024340028, 邮箱: 2351922591@qq.com</p>
    </footer>
  </div>
</template>

<script>
export default {
  name: 'AuthorView',
};
</script>

<style scoped>
.author-view {
  display: flex;
  flex-direction: column;
  height: 100vh;
  margin: 0;
  font-family: 'Microsoft YaHei', sans-serif;
  background-color: #ffffff;
}

.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 1em;
  background-color: #ffffff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
}

.logo {
  width: 50px;
  height: auto;
  margin-right: 0.5em;
}

.school-name {
  margin: 0;
  color: #333;
}

.content {
  flex: 1;
  padding-top: 6em;
  padding-bottom: 2em;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.title {
  font-size: 2.5em;
  color: #333;
  margin-bottom: 2em;
}

.resume-card {
  width: 90%;
  max-width: 800px;
  background-color: #ffffff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  padding: 2em;
  border-radius: 8px;
}

.resume-table {
  width: 100%;
  border-collapse: collapse;
}

.resume-table th,
.resume-table td {
  padding: 1.2em;
  text-align: left;
  font-size: 1.1em;
}

.resume-table th {
  background-color: #00bcd4;
  color: white;
  text-align: center;
  font-size: 1.2em;
}

.resume-table td {
  background-color: #ffffff;
  border-bottom: 1px solid #ddd;
}

.resume-table td[colspan="3"] {
  text-align: left;
  padding-left: 2em;
}

.label {
  color: #b0bec5; /* 使用浅灰色或浅蓝色 */
}

.header-row {
  font-size: 1.3em;
  font-weight: bold;
}

.back-button {
  margin-top: 2em;
  padding: 1em 2em;
  background-color: #007bff;
  color: #fff;
  text-decoration: none;
  border-radius: 5px;
}

.back-button:hover {
  background-color: #0056b3;
}

.footer {
  text-align: center;
  padding: 1em;
  background-color: #ffffff;
  color: #666;
  font-size: 0.85em;
}
</style>
